<template>
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>社团</el-breadcrumb-item>
      <el-breadcrumb-item>{{teamName}}</el-breadcrumb-item>
      <el-breadcrumb-item><b>社团公告</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <el-table :data="tableNews" stripe border style="width: 100%">
    <el-table-column prop="id" label="公告id"  width="100px"/>
    <el-table-column prop="title" label="公告标题" width="150px" />
    <el-table-column prop="content" label="公告内容" />
    <el-table-column prop="publishdt" label="发布时间"width="150px" />
    <el-table-column prop="identity" label="发布部门" width="150px"/>
  </el-table>

  <!-- 编辑模态框 -->
  <el-dialog v-model="dialogEditState" title="成员信息" width="700">
    <div>
      <el-form ref="sname" :model="formEdit" label-width="120px">
        <el-form-item prop="sname" label="姓名">
          <el-input v-model="formEdit.sname":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="sid" label="学号">
          <el-input v-model="formEdit.sid":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="gender" label="性别">
          <el-input v-model="formEdit.gender":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="dept" label="年级">
          <el-input v-model="formEdit.dept":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="联系方式">
          <el-input v-model="formEdit.phone" ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogEditOnReset">取消</el-button>
        <el-button type="primary"  @click="dialogEditOnSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>

  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[1,5,10]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
import {Edit , Delete , Plus} from "@element-plus/icons";
import {onMounted, reactive, ref} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from "@/utils/amusement"
import axios from 'axios';

//分页
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const getMember=()=>{
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    type : JSON.parse(sessionStorage.getItem('loginUser')).teamid
    // 初始时不包含其他参数
  };
  request({
    url:'/notice2/amusement22',
    method:'get',
    params,
  }).then((req)=>{
    if (req.data.errorCode==200){
      tableNews.value=req.data.data.records;
      totals.value=req.data.data.total;
    }
  })
}
const handleSizeChange = (val) => {
  pageSize.value=val;
  getMember()
}
const handleCurrentChange = (val) => {
  currentPage.value=val;
  getMember()
}


//新建个axios对象
const httpClient = axios.create({
  validateStatus(status) {
    return status >= 200 && status < 504 // 设置默认的合法的状态
  },
  timeout: 10000   //超时时间10秒
});


httpClient.defaults.retry = 3 // 请求重试次数
httpClient.defaults.retryDelay = 1000 // 请求重试时间间隔
httpClient.defaults.shouldRetry = true // 是否重试

//添加请求拦截器
httpClient.interceptors.request.use(
    config => {
      //添加header
      config.headers['Content-Type'] = 'application/json'
      config.headers['Accept-Language'] = 'zh-CN'
      config.headers['auth-token'] = sessionStorage.getItem('token') // 或者loginUser.token
      if (config.method === 'post') {
        if (!config.data) { // 没有参数时，config.data为null，需要转下类型
          config.data = {}
        }
        // config.data = JSON.stringify(config.data) // qs序列化参数
      }
      return config
    },
    err => {
      //Promise.reject()方法返回一个带有拒绝原因的Promise对象，在F12的console中显示报错
      Promise.reject(err)
    }
);

let teamName = JSON.parse(sessionStorage.getItem('loginUser')).team
const searchFormRef = ref()
const searchFormModel = reactive({
  teamid : JSON.parse(sessionStorage.getItem('loginUser')).teamid
  // teamid : 1
})

const getMenu = () => {
  request({
    url:'/sys/team/gets',
    method:'get',
    params:searchFormModel
  }).then(req=>{
    if (200 == req.data.errorCode){
      tableNews.value=req.data.data
    }
  })
};


onMounted(()=>{
  getMember()
})

// 菜品类别
const menuType = ref([])
///////// 表格 //////////////////
// 表格的数据
const tableNews = ref([])

//////////////  新增模态框相关  ///////////////////////
const dialogAddState = ref(false)

// 新增表单引用
const formAddRef = ref()
// 新增表单初始化数据
const formAddData = {
  sname : '' ,
  sid : '' ,
  gender : '' ,
  dept: '',
  phone : ''
}
// 新增表单绑定数据模型
const formAdd = reactive({...formAddData})
// 新增表单初始化数据
const formDelData = {
  sid : '' ,
  teamid : JSON.parse(sessionStorage.getItem('loginUser')).teamid
}
// 新增表单绑定数据模型
const formDel = reactive({...formDelData})   // ...formAddData 解构formAddData

//////////////  编辑模态框相关  ///////////////////////
const dialogEditState = ref(false)
const dialogEditOnSubmit = () => {
  // 数据提交到服务器
  // 服务器端返回成功 ：清空表单，关闭对话框，更新表格内容
  request({
    method: 'put',
    url:'/sys/funstudent/update',
    data: JSON.stringify(formEdit),
    headers: { 'content-type': "application/json;charset=UTF-8" },
  }).then(req => {
    if (200 == req.data.errorCode) {
      ElMessage({
        type: 'success',
        message: "修改成功"
      });
      getMenu()
    } else {
      ElMessage({
        type: 'error',
        message: req.data.msg
      });
    }
  });
  dialogEditState.value = false
}
const dialogEditOnReset = () => {
  // 清空表单数据
  Object.assign(formEdit , formEditData)
  // 关闭对话框
  dialogEditState.value = false
}
// 新增表单引用
const formEditRef = ref()
// 新增表单初始化数据
const formEditData = {
  sname : '' ,
  sid : '' ,
  gender : '' ,
  dept : '' ,
  phone: '',
}
// 编辑表单绑定数据模型
const formEdit = reactive({...formEditData})

</script>

<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
.page{
  margin-left: 30%;
}
.status-normal {
  color: blue;
}

.status-delayed {
  color: green;
}

.status-cancelled {
  color: red;
}
</style>